<template>
<!-- 	<button style="position: absolute; top:10px;left:50%" @click="onBtnClick('start')">启动{{store.state.lists}}</button> -->
	
	<div class="mapDiv" ref="mapDiv">

		<tdt-map :center="state.center" :zoom="state.zoom" @zoomstart="zoomstart" @zoomend="zoomend"
			@contextmenu="contextmenu" :controls="state.controls">

			<tdt-control position="topleft" :visible="state.visible">
				<button>自定义控件</button>
			</tdt-control>
			<tdt-tilelayer :url="state.url" :zIndex="1"></tdt-tilelayer>
			<tdt-tilelayer :url="state.url1" :errorTileUrl="state.errorTileUrl" :zIndex="1"></tdt-tilelayer>
			<tdt-tilelayer :url="state.url2" :errorTileUrl="state.errorTileUrl" :zIndex="1"></tdt-tilelayer>
			<!-- <tdt-marker v-for="marker in markers" :position="marker.position" :extData="marker" @click="openInfowindow"
				:icon="state.icon"></tdt-marker>
			<tdt-infowindow v-model:target="state.currentMarker.position" :minWidth="150" :offset="[0, -30]">
				<div>
					<strong>{{ state.currentMarker.title }}</strong>
					<div>{{ state.currentMarker.position }}{{props.kjLxFlag}}</div>
				</div>
			</tdt-infowindow> -->

			<tdt-car-track v-if="props.kjLxFlag" ref="carTrack" :carstyle="cartStyle" :polylinestyle="polylinestyle"
				:Datas="store.state.lists" :interval="5" :speed="10"></tdt-car-track>

			<tdt-cloud-marker-collection :lnglats="lnglats" color="blue" SizeType="NORMAL"
				ShapeType="SQUARE"></tdt-cloud-marker-collection>
		</tdt-map>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref, defineProps } from "vue-demi";
	import store from '@/store/index';
	let props = defineProps({
		kjLxFlag:{
			type:Boolean,
			default:false
		}
	})
	const markers = [
		{ title: "这是第一个标记点", position: [105.40255, 26.25907] },
		{ title: "这是第二个标记点", position: [105.41269546, 26.25930206] },
		{ title: "这是第三个标记点", position: [105.39719776, 26.25687308] },
		{ title: "这是第四个标记点", position: [105.41903408, 26.26620587] }
	];
	const state = reactive({
		center: [105.40673, 26.26203],
		zoom: 18,
		visible: true,
		url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=7f013d0186775b063d6a046977bbefc6",
		url1: "http://111.123.20.116:28000/gisserver/xyz/xr/{z}/{x}/{y}.png",
		url2: "http://111.123.20.116:28000/gisserver/xyz/mjjs/{z}/{x}/{y}.png",
		errorTileUrl: require("../../../assets/tm.png"),
		currentMarker: {} as typeof markers[0],
		icon: {
			iconUrl: require("../../../assets/logo.png")
		},
		controls: [
			"Zoom",
			"Scale",
			{
				name: "Copyright",
				id: "custom",
				content: `<div style="height:40px"><button>zzm 版权</button></div>`,
				position: "bottomleft",
				bounds: [
					[113.52791, 23.21989],
					[113.03352, 23.03045]
				]
			},
			{
				name: "MapType",
				position: "topright",
				mapTypes: [
					{
						title: "地图", //地图控件上所要显示的图层名称
						icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小 80x80）
						layer: "TMAP_NORMAL_MAP" //地图类型，在原天地图api中以window.TMAP_NORMAL_MAP表示，此处为字符串
					},
					{
						title: "卫星",
						icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
						layer: "TMAP_SATELLITE_MAP"
					},
					{
						title: "卫星混合",
						icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
						layer: "TMAP_HYBRID_MAP"
					}
					// {
					//   title: "地形",
					//   icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png",
					//   layer: "TMAP_TERRAIN_MAP"
					// },
					// {
					//   title: "地形混合",
					//   icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png",
					//   layer: "TMAP_TERRAIN_HYBRID_MAP"
					// }
				]
			},

		]
	});
	function openInfowindow({ extData } : { extData : typeof markers[0] }) {
		state.currentMarker = { ...extData };
	}
	const zoomstart = (obj) => {
		console.log(obj.target.getZoom())
		console.log(obj.target.getCenter())
	}

	const zoomend = (obj) => {
		console.log(obj.target.getZoom())
	}
	const contextmenu = (obj) => {
		// console.log(obj.target.setZoom(15))
		obj.target.panTo([39.92594, 116.37304], 13)
	}
	let routerDetail = {
		"lists": [
			["105.4066524", "26.25787655"],
			["105.4125497", "26.25569618"],
			["105.4115120", "26.25375449"],
			["105.4112911", "26.25307298"],
			["105.4112991", "26.25225053"],
			["105.4119071", "26.25102019"],
			["105.4133840", "26.24922309"],
			["105.4134550", "26.24858978"],
			["105.4133251", "26.24631342"],
			["105.4133651", "26.24594123"],
			["105.4134791", "26.24538199"],
			["105.4137742", "26.24461375"],
			["105.4151672", "26.24242749"],
			["105.4158542", "26.24164055"],
			["105.4169874", "26.24061986"],
			["105.4198989", "26.23884241"],
			["105.4244477", "26.23566134"],
			["105.4281278", "26.23345357"],
			["105.4289924", "26.23284436"],
			["105.4381091", "26.22564415"],
			["105.4389611", "26.22508130"],
			["105.4403908", "26.22427637"],
			["105.4412319", "26.22382964"],
			["105.4415943", "26.22362019"],
			["105.4421040", "26.22320389"],
			["105.4424895", "26.22285041"],
			["105.4442160", "26.22097462"],
			["105.4449370", "26.22032966"],
			["105.4469610", "26.21893192"],
			["105.4474728", "26.21863079"],
			["105.4478604", "26.21847551"],
			["105.4481969", "26.21841017"],
			["105.4485615", "26.21844996"],
			["105.4516104", "26.21902889"],
			["105.4527063", "26.21916241"],
			["105.4534897", "26.21903710"],
			["105.4540777", "26.21882732"],
			["105.4542070", "26.21877259"],
			["105.4617787", "26.21414009"],
			["105.4628500", "26.21333933"],
			["105.4645867", "26.21176885"],
			["105.4654586", "26.21080555"],
			["105.4668277", "26.20916316"],
			["105.4689064", "26.20672125"],
			["105.4690848", "26.20676776"],
			["105.4698164", "26.20733708"],
			["105.4699207", "26.20718727"],
			["105.4700950", "26.20731282"]
		]
	};
	// 车辆样式
	const cartStyle = reactive({
		display: true, iconUrl: require("../../../assets/xr.png"), width: 52, height: 80
	})
	// 轨迹样式
	const polylinestyle = reactive({
		display: true, color: "yellow", width: 5, opacity: 0.8
	})
	const carTrack = ref();
	function onBtnClick(handle : string) {
		carTrack.value[handle]();
	}
	setTimeout(() => {
		carTrack.value.start();
	}, 1)

	const lnglats = [
		[105.39010213268078, 26.257552750856874, 0.0037815330384081375],
		[105.39098208365935, 26.25590851219958, 0.005230356925545393],
		[105.39122245361608, 26.255786222938056, 0.005359144218466143],
		[105.39141452780922, 26.255681784670138, 0.004237223075163764],
		[105.39158174434301, 26.255611629775988, 0.0042558166797737945],
		[105.39186466578278, 26.25566453049683, 0.003281778618860207],
		[105.39232968238164, 26.255751035508293, 0.004959103059454356],
		[105.39244588657628, 26.25575337470719, 0.004750348098748141],
		[105.39275709855082, 26.255725786965584, 0.005481216344863013],
		[105.39306394367856, 26.255597151063547, 0.004438990212347349],
		[105.39353543844815, 26.255440987338954, 0.0047291874150582405],
		[105.39361867721354, 26.255191494433856, 0.004691291175277506],
		[105.39358532580043, 26.25494972239303, 0.004661951399242405],
		[105.39361614303584, 26.254615192080113, 0.003349122745323394],
		[105.39363932446776, 26.25430362039451, 0.004002996309071773],
		[105.39364213182373, 26.25413669765033, 0.004932577640020845],
		[105.39447198185484, 26.254303631322355, 0.0031568512712993545],
		[105.39480479009569, 26.254446218040087, 0.0030768511475517245],
		[105.39523029121568, 26.254593855485663, 0.003528613790191877],
		[105.3954085399785, 26.2546420728462, 0.00383943105438263],
		[105.39569246381606, 26.254581228350787, 0.0031937130417756727],
		[105.39593993033958, 26.25438637704018, 0.004154816913424911],
		[105.3962785771311, 26.254233639136856, 0.004328857956346219],
		[105.39661801064314, 26.254080386235838, 0.004848830777539921],
		[105.39735921295257, 26.253651634813668, 0.0037687677587562337],
		[105.39781188778885, 26.25336645375472, 0.005683133481167563],
		[105.39799330856826, 26.253262979231202, 0.0047095281077152],
		[105.3983045032076, 26.25326963581034, 0.004589452216198008],
		[105.39868873325946, 26.25319851396623, 0.005864264599121789],
		[105.39896023367503, 26.2530243717828, 0.005307763854494532],
		[105.39911315764667, 26.252823154455875, 0.004503393676887861],
		[105.39919576590947, 26.252564261238685, 0.004598961126298688],
		[105.39918151626793, 26.25239034605255, 0.004718924701926792],
		[105.39913599556212, 26.252192238810785, 0.002353328124519226],
		[105.39902132272728, 26.25199559543198, 0.002648407311135359],
		[105.39892235548724, 26.251783905502393, 0.0019957967564847657],
		[105.39880686653113, 26.25156292187908, 0.0020979451626596435],
		[105.39868139778642, 26.251366573120166, 0.0021013890798014154],
		[105.39859420993824, 26.251183796648885, 0.0028600042072256028],
		[105.4004676230585, 26.2503733718605, 0.004718310996462709],
		[105.40163533238416, 26.250250551145886, 0.007925168847170122],
		[105.40297731331606, 26.25007313479284, 0.004085113889010113],
		[105.403769899377, 26.25001308373163, 0.00633517169731415],
		[105.40511682354192, 26.249976209733326, 0.010953677747067068],
		[105.40667415872232, 26.250010424667114, 0.007983032854596025],
		[105.40773772054531, 26.249994154089016, 0.007515923237346344],
		[105.40863849546692, 26.250199818848312, 0.005752939065510826],
		[105.40872097292856, 26.250542993575262, 0.004024368038414427],
		[105.40930734122786, 26.251102683176445, 0.0036943398972355003],
		[105.4103723689878, 26.251598362691333, 0.004741588265499341],
		[105.4110624126397, 26.251819693146782, 0.0038038890625567566],
		[105.41132287723909, 26.251917658620123, 0.004030931170357327],
		[105.41122411500086, 26.2524457853262, 0.007650289025093331],
		[105.41113895342204, 26.252883467414843, 0.009271798854566781],
		[105.41125743386576, 26.253435682436965, 0.009910049894353061],
		[105.41145403807884, 26.253835641757483, 0.010002438656582678],
		[105.41165165358836, 26.254265599451664, 0.009492749045674919],
		[105.41191379704877, 26.254633750300076, 0.010825846877737563],
		[105.41225155546604, 26.25528709040861, 0.010643320152682626],
		[105.41246041144379, 26.255686673943707, 0.00961940220018577],
		[105.41272488519265, 26.255996631457005, 0.008650721666861245],
		[105.41193560524697, 26.25635299787349, 0.007539658994371142],
		[105.41116644450352, 26.2567264326468, 0.008061925959587055],
		[105.41043691787137, 26.25711639802628, 0.004051913362929215],
		[105.40926482589974, 26.25771227805015, 0.0022377854526930818],
		[105.40816964396537, 26.25827081420104, 0.0038781570342159306],
		[105.40856485730473, 26.258982509971148, 0.006585872762510987],
		[105.40976417910292, 26.258614963038767, 0.006175065167775059],
		[105.41109899368493, 26.258208471180954, 0.008869665121303686],
		[105.41221546918129, 26.257702195210634, 0.004702603783314447],
		[105.41306139137276, 26.257458976806355, 0.01114175582018921],
		[105.41409852028019, 26.257316774104087, 0.0052131985847330515],
		[105.41505632097328, 26.257632229680386, 0.008143546171574548],
		[105.41649929813869, 26.258035292532792, 0.014645673086412932],
		[105.4172057175918, 26.258386080629986, 0.010094282617159752],
		[105.41785096923243, 26.258795475983632, 0.006675108733797873],
		[105.41874860610841, 26.259197971685527, 0.008836927703259858],
		[105.41798963526342, 26.26010127071417, 0.015104728373845633],
		[105.41728799681805, 26.26083217930732, 0.014394905531839338],
		[105.41649172149884, 26.26156567398575, 0.01782435556061048],
		[105.41569159912194, 26.2621853816597, 0.010288429814601617],
		[105.41523275226263, 26.262624955544037, 0.010136132912377466],
		[105.4146486683318, 26.26309641187636, 0.004789822478534226],
		[105.41427681170371, 26.263305860272045, 0.010494547262705434],
		[105.41384663830168, 26.26365924577733, 0.014082412649445852],
		[105.41440630974877, 26.264327500879684, 0.015723294637326978],
		[105.41536456123262, 26.264643089565958, 0.0033882488484442324],
		[105.41489405217584, 26.26568125676183, 0.019285537223417543],
		[105.41245051560153, 26.267228981419247, 0.010193383163648621],
		[105.40715004181646, 26.26821405075482, 0.009792570463353117],
		[105.40680770381529, 26.267425892166656, 0.013022037977737202],
		[105.4061047579259, 26.267188719741448, 0.014854862172218318],
		[105.40527548528253, 26.267894888161642, 0.009370115205559495],
		[105.40358916753783, 26.267794799158878, 0.0026044911095528954],
		[105.40314459521461, 26.266905104163992, 0.0036850666353171455],
		[105.39953062299821, 26.265716846868802, 0.009401548216805151],
		[105.39930866354992, 26.265645906453283, 0.010710144236181026],
		[105.39908909369666, 26.264915033918044, 0.009947732993677764],
		[105.39896692976498, 26.264181672320678, 0.008296533824070387],
		[105.39873251058802, 26.2637372541757, 0.005494350792896671],
		[105.39848183048058, 26.263535177905425, 0.004403801984424761],
		[105.39722534194388, 26.263009998022497, 0.007747025795978896],
		[105.39697538285787, 26.262829878214266, 0.009524303261136876],
		[105.39643899927111, 26.261733664254074, 0.005407410660937613],
		[105.39633128702707, 26.261428966380844, 0.006546839350063773],
		[105.39553517894339, 26.260945285940508, 0.009439185082455533],
		[105.39499768465716, 26.260542441239966, 0.009406139016958004],
		[105.39465535637162, 26.260145256924147, 0.0033954084770378102],
		[105.39429900171471, 26.259693521861664, 0.01023927583862545],
		[105.39378549439265, 26.25927903081593, 0.010149552274074226],
		[105.39319747507786, 26.25882262126864, 0.007028698185246238],
		[105.3926116648591, 26.25843207013131, 0.005063304406079303],
		[105.39216602963387, 26.258224475380846, 0.003715619858681621],
		[105.39143078616782, 26.258101680128632, 0.002023484661687632],
		[105.39092574057935, 26.257939644001468, 0.0032096798458602577],
		[105.3905435452034, 26.257807221276767, 0.003250602716903406],
		[105.39010213268078, 26.257552750856874, 0.0037815330384081375],
	];
	
</script>


<style scoped>
	.mapDiv {
		width: 100vw;
		height: 90vh;
	}

	
</style>